<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01发送AJAX请求</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="send">send axios get请求</button>
    <hr>
    <button @click="sendGet">GET方式发送AJAX请求</button>
    <hr>
    <button @click="sendPost">POST方式发送AJAX请求</button>
    <hr>
    GitHub ID： <input type="text" v-model="uid">
    <button @click="getUserById(uid)">getUserById 获取指定GitHub账户信息并显示</button>
    <br>
    姓名：{{user.name}} <br>
    头像：<img :src="user.avatar_url" alt="">
    <hr>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                user: {
                    name: 'alice',
                    age: 19
                },
                uid: '111'
            }
        },
        methods: {
            send() {
                axios({
                    method: 'get',
                    url: 'user.json',

                }).then(function (response) {
                    console.log(response.data);
                }).catch(resp => {
                    console.log('请求失败：' + resp.status + ',' + resp.statusText);
                })

            },
            sendGet() {
                axios.get('http://www.httpbin.org/', {
                    params: {
                        user: 'cucy',
                        age: 100
                    }
                })
                    .then(response => {
                        console.log(response.data)

                    })
                    .catch(errresponse => {
                    })
            },
            sendPost() {
                axios.post('http://www.httpbin.org/', this.user, {
                    transformRequest: [
                        function (data) {
                            let params = '';
                            for (let index in data) {
                                params += index + '=' + data[index] + '&';
                            }
                            return params;
                        }
                    ]
                })
                    .then(response => {
                        console.log(response.data);
                    })
                    .catch(err => {
                        console.log('错误回复' + err.data)
                    })
            },
            getUserById() {
                axios.get(`https://api.github.com/users/${this.uid}`)
                    .then(resp => {
                        console.log(resp.data);
                        this.user = resp.data;
                    })
                    .catch()
            },
        }
    })
</script>
</body>
</html>